<template>
    <div class="detailsCeiling" v-if="detailsCeilingShow">
        <a-row type="flex" justify="space-between" :class="{}">
            <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="top-center-right">
                <img :src="goodsDetails.s_goods_photos[0].path" alt="">
                <div class="text">
                    <span>{{goodsDetails.desc[0]}}</span>
                    <span>{{goodsDetails.desc[2]}} {{goodsDetails.desc[1]}}</span>
                    <span>{{goodsDetails.price | demoMoney}}</span>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="top-center-left">
                <button @click="addToCart">加入购物车</button>
                <button>现在购买</button>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
    filters:{
        demoMoney(value) {
            return '￥' + value + ".00"
        }
    },
    data() {
        return {
            show:false
        }
    },
    computed:{
        ...mapState("details",['goodsDetails','detailsCeilingShow'])
    },
    methods: {
        ...mapActions('cart', ['AddCart']),
        addToCart() {
            // console.log(this.goods)
            if(this.$Cookie.get("user")) {
                let result = this.AddCart(this.goodsDetails.id)
                if (result) {
                    this.$message.success('添加成功');
                } else {
                    this.$message.error('添加失败');
                }
            } else {
                let id = this.$route.params.id
                this.$router.push({path:'/login',query:{id}})
            }
        }
    },
}
</script>

<style lang="scss" scoped>
    .detailsCeiling {
        background: #f0f1f3;
        border-top: 1px solid #dad7d7;
        border-bottom: 1px solid #dad7d7;
        .top-center-right {
            margin: 10px 30px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            img {
                width:50px;
                height:70px;
            }
            .text {
                display: flex;
                flex-direction: column;
                text-align: left;
                color: #969696;
                span:first-child,
                span:last-child {
                    font-size: 18px;
                    font-weight: 700;
                    color: #003150;
                }
            }
        }
        .top-center-left {
            display: flex;
            justify-content: flex-start;
            @media (max-width:768px) {
                justify-content: center;
            }
            align-items: center;
            padding: 0 32px;
            @media (max-width: 1200px) {
                padding: 0px;
            }
            button {
                font-size: 15px;
                width: 203px;
                height: 70px;
                padding: 15px 10px;
                background: #003150;
                color: white;
                padding: 15px 10px;
                margin-right: 20px;
                @media (max-width: 1200px) {
                    width: 160px;
                    height: 50px;
                    margin-right: 10px;
                }
                &:hover {
                    background-color: white;
                    color: #003150;
                    border: 1px solid #003150;
                }
            }
        }
    }

</style>